<template>
  <h3>{{ $t('实时流量') }}</h3>
  <div ref="el" style="width:95%; height:27vh" id="line_charts"></div>
</template>
<script setup>
import {ref, onMounted, onBeforeUnmount,getCurrentInstance} from 'vue'
import * as echarts from 'echarts'
import {useResizeObserver} from '@vueuse/core'
import {getRealTimeData} from '~/api/screen'

const { proxy } = getCurrentInstance();
let myChart = null
onMounted(() => {
  const chartDom = document.getElementById('line_charts')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})

onBeforeUnmount(() => {
  if (myChart) echarts.dispose(myChart)
})

function getData() {
  // 基于准备好的dom，初始化echarts实例
  let dateXYdata = []
  let data0Y = []
  let data1Y = []
  let dataX = []
  getRealTimeData().then((result) => {
    dateXYdata = result.data;

    data0Y = dateXYdata[0].dateY
    data1Y = dateXYdata[1].dateY
    // console.log(dateXYdata);
    dataX = dateXYdata[0].dateX
    // console.log(dataX);
    let xAxisShape = {
      type: 'category',
      boundararyGap: false,
      axisLabel: {
        /*inside: true,*/
        interval: 0,
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolOffset: 12,
        lineStyle: {
          color: '#fff',
        }
      },
      data: dataX
    };
    let yAxisShape = {
      type: 'value',
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolOffset: 12,
        lineStyle: {
          color: '#fff',
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      }
    };
    // 图表的配置
    let option;
    option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
        right: '10%',
        data: ['折线一', '折线二']
      },
      grid: {
        x: 50,
        // y: 40,
        x2: 0,
        y2: 40
      },
      // toolbox: {
      //   feature: {
      //     //saveAsImage: {}
      //   }
      // },
      xAxis: xAxisShape,
      yAxis: yAxisShape,
      series: [
        {
          name: proxy.$t('今日流量'),
          type: 'line',
          stack: proxy.$t('总量'),
          data: data0Y,
          itemStyle: {
            normal: {
              color: "#0efdff",//折线点的颜色
              lineStyle: {
                color: "#0efdff",//折线的颜色
                width: 2,
              }
            },
          }
        },
        {
          name: proxy.$t('昨日流量'),
          type: 'line',
          stack: proxy.$t('总量'),
          data: data1Y
        },
      ]
    };
    myChart.setOption(option);
  })
  // let dataX = []
  // let data1Y = []
  // console.log(res.data.data);
  // data1Y = res.data.data[1].dataY
  // console.log(data1Y);
  // // data1Y = res.data.data[1].dataY

  // const data0Y = res.data.data[0].dataY
  // dataX = res?.data?.data?.dataX
  // console.log(data0Y);
  // console.log(dataX);
}

// 启动语句

// vueuse 里面的 useResizeObserve   在使用myChart.resize() 重新自己设定大小
const el = ref(null)
useResizeObserver(el, entries => myChart.resize())
</script>

<style scoped>

</style>